<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Function as Data</title>
    <link rel="stylesheet" type="text/css" href="../../css/styles.css"/>
    <script type="text/javascript" src="../../lib/d3.js"></script>
</head>

<body>
<div id="container"></div>

<script type="text/javascript">
    var data = []; // <- A

    var datum = function (x) { // <- B
        return 15 + x * x;
    };
    
    var newData = function () { // <- C
        data.push(datum);
        return data;
    };

    function render(){
        var divs = d3.select("#container")
                    .selectAll("div")
                    .data(newData); // <- D

        divs.enter().append("div").append("span");

        divs.attr("class", "v-bar")
            .style("height", function (d, i) {
                return d(i) + "px"; // <- E
            })
            .select("span") // <- F
                .text(function(d, i){ 
                    return d(i); // <- G
                });

        divs.exit().remove();
    }
    
    setInterval(function () {
        render();
    }, 1000);

    render();
</script>

</body>

</html>